<!doctype html>
<html lang="en">

<head>
   <!-- Required meta tags -->
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
   <!-- Favicon icon-->
   <link rel="apple-touch-icon" sizes="180x180"
      href="https://block.codescandy.com/assets/images/favicon/apple-touch-icon.png" />
   <link rel="icon" type="image/png" sizes="32x32"
      href="https://block.codescandy.com/assets/images/favicon/favicon-32x32.png" />
   <link rel="icon" type="image/png" sizes="16x16"
      href="https://block.codescandy.com/assets/images/favicon/favicon-16x16.png" />
   <link rel="manifest" href="https://block.codescandy.com/assets/images/favicon/site.webmanifest" />
   <link rel="mask-icon" href="https://block.codescandy.com/assets/images/favicon/block-safari-pinned-tab.svg"
      color="#8b3dff" />
   <link rel="shortcut icon" href="https://block.codescandy.com/assets/images/favicon/favicon.ico" />
   <meta name="msapplication-TileColor" content="#8b3dff" />
   <meta name="msapplication-config" content="https://block.codescandy.com/assets/images/favicon/tile.xml" />

   <!-- Color modes -->
   <script src="https://block.codescandy.com/assets/js/vendors/color-modes.js"></script>

   <!-- Libs CSS -->
   <link href="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.css" rel="stylesheet" />
   <link href="https://block.codescandy.com/assets/libs/bootstrap-icons/font/bootstrap-icons.min.css"
      rel="stylesheet" />

   <!-- Scroll Cue -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/libs/scrollcue/scrollCue.css" />

   <!-- Box icons -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/fonts/css/boxicons.min.css" />

   <!-- Theme CSS -->
   <link rel="stylesheet" href="https://block.codescandy.com/assets/css/theme.min.css">


   <title>Introduction - Responsive Website Template | Block</title>
</head>

<body>
   <!--Main wrapper start-->
   <main class="docs-main-wrapper">
      <!-- Docs navbar -->
      <header>
         <nav class="navbar navbar-expand-lg w-100 fixed-top bg-white">
            <div class="container-fluid px-3">
               <a class="navbar-brand" href="../index.html"><img
                     src="https://block.codescandy.com/assets/images/logo/logo.svg" alt /></a>

               <ul class="navbar-nav align-items-lg-center flex-row">
                  <li class="nav-item d-none d-md-block">
                     <a class="nav-link me-4 border-bottom-0" href="https://block.codescandy.com/index.html"
                        target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-display me-2" viewBox="0 0 16 16">
                           <path
                              d="M0 4s0-2 2-2h12s2 0 2 2v6s0 2-2 2h-4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75c.167-.333.25-.833.25-1.5H2s-2 0-2-2V4zm1.398-.855a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3H2c-.325 0-.502.078-.602.145z" />
                        </svg>
                        Live Preview
                     </a>
                  </li>
                  <li class="nav-item">
                     <a class="btn btn-primary me-2 me-lg-0" href="https://bit.ly/block-theme" target="_blank">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                           class="bi bi-cart4 me-2" viewBox="0 0 16 16">
                           <path
                              d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l.5 2H5V5H3.14zM6 5v2h2V5H6zm3 0v2h2V5H9zm3 0v2h1.36l.5-2H12zm1.11 3H12v2h.61l.5-2zM11 8H9v2h2V8zM8 8H6v2h2V8zM5 8H3.89l.5 2H5V8zm0 5a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z" />
                        </svg>
                        Buy now
                     </a>
                  </li>
                  <li class="nav-item d-md-none">
                     <button class="navbar-toggler btn btn-icon" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#docsSidebar">
                        <i class="bi bi-list"></i>
                     </button>
                  </li>
               </ul>
            </div>
         </nav>
      </header>

      <!-- left sidebar -->
      <!-- Side navbar -->
      <aside class="docs-nav-sidebar">
         <div class="docs-nav" data-simplebar>
            <div class="offcanvas-md offcanvas-start" id="docsSidebar" data-bs-scroll="true">
               <div class="offcanvas-header">
                  <h5 class="offcanvas-title" id="docsSidebarLabel">Menu</h5>

                  <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
               </div>
               <div class="offcanvas-body pt-0 align-items-center flex-column">
                  <div class="px-3 w-100">
                     <input type="search" class="form-control" id="quickSearch" placeholder="Quick Search..." />
                  </div>
                  <ul class="navbar-nav flex-column" id="sidebarnav">
                     <li class="navbar-header">
                        <h5 class="heading">Getting Started</h5>
                     </li>
                     <li class="nav-item"><a href="../docs/index.html" class="nav-link">Introduction</a></li>
                     <li class="nav-item"><a href="../docs/environment-setup.html" class="nav-link">Environment
                           setup</a></li>
                     <li class="nav-item"><a href="../docs/working-with-gulp.html" class="nav-link">Working with
                           Gulp</a></li>
                     <li class="nav-item"><a href="../docs/compiled-files.html" class="nav-link">Compiled Files</a></li>
                     <li class="nav-item"><a href="../docs/file-structure.html" class="nav-link">File Structure</a></li>
                     <li class="nav-item"><a href="../docs/resources-assets.html" class="nav-link">Resources &
                           assets</a></li>
                     <li class="nav-item"><a href="../docs/changelog.html" class="nav-link">Changelog</a></li>

                     <li>
                        <div class="navbar-border"></div>
                     </li>
                     <li class="navbar-header mt-0">
                        <h5 class="heading">Foundation</h5>
                     </li>
                     <li class="nav-item"><a href="../docs/typography.html" class="nav-link">Typography</a></li>
                     <li class="nav-item"><a href="../docs/colors.html" class="nav-link">Colors</a></li>
                     <li class="nav-item"><a href="../docs/shadows.html" class="nav-link">Shadows</a></li>

                     <li>
                        <div class="navbar-border"></div>
                     </li>

                     <li class="navbar-header mt-0">
                        <h5 class="heading">
                           Components
                           <small class="text-primary">(Bootstrap)</small>
                        </h5>
                     </li>
                     <li class="nav-item"><a href="../docs/components/accordion.html" class="nav-link">Accordion</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/alert.html" class="nav-link">Alerts</a></li>
                     <li class="nav-item"><a href="../docs/components/back-to-top.html" class="nav-link">Back to top</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/badge.html" class="nav-link">Badge</a></li>
                     <li class="nav-item"><a href="../docs/components/breadcrumb.html" class="nav-link">Breadcrumb</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/button.html" class="nav-link">Buttons</a></li>
                     <li class="nav-item"><a href="../docs/components/button-group.html" class="nav-link">Button
                           group</a></li>
                     <li class="nav-item"><a href="../docs/components/card.html" class="nav-link">Card</a></li>
                     <li class="nav-item"><a href="../docs/components/carousel.html" class="nav-link">Carousel</a></li>
                     <li class="nav-item"><a href="../docs/components/collapse.html" class="nav-link">Collapse</a></li>
                     <li class="nav-item"><a href="../docs/components/dropdown.html" class="nav-link">Dropdowns</a></li>
                     <li class="nav-item"><a href="../docs/components/list-group.html" class="nav-link">List group</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/modal.html" class="nav-link">Modal</a></li>
                     <li class="nav-item"><a href="../docs/components/nav-tabs.html" class="nav-link">Navs & tabs</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/offcanvas.html" class="nav-link">Offcanvas</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/pagination.html" class="nav-link">Pagination</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/placeholders.html"
                           class="nav-link">Placeholders</a></li>
                     <li class="nav-item"><a href="../docs/components/popovers.html" class="nav-link">Popovers</a></li>
                     <li class="nav-item"><a href="../docs/components/progress.html" class="nav-link">Progress</a></li>
                     <li class="nav-item"><a href="../docs/components/scrollspy.html" class="nav-link">Scrollspy</a>
                     </li>
                     <li class="nav-item"><a href="../docs/components/spinners.html" class="nav-link">Spinners</a></li>
                     <li class="nav-item"><a href="../docs/components/table.html" class="nav-link">Tables</a></li>
                     <li class="nav-item"><a href="../docs/components/toast.html" class="nav-link">Toasts</a></li>
                     <li class="nav-item"><a href="../docs/components/tooltip.html" class="nav-link">Tooltips</a></li>
                     <li>
                        <div class="navbar-border"></div>
                     </li>
                     <li class="navbar-header mt-0">
                        <h5 class="heading">Forms</h5>
                     </li>
                     <li class="nav-item">
                        <a href="../docs/components/forms.html" class="nav-link">Basic Forms</a>
                     </li>

                     <li>
                        <div class="navbar-border"></div>
                     </li>
                     <li class="navbar-header mt-0">
                        <h5 class="heading">Plugins</h5>
                     </li>

                     <li class="nav-item">
                        <a href="../docs/plugins/intl-tel-input.html" class="nav-link">Intl Tel Input</a>
                     </li>
                     <li class="nav-item">
                        <a href="../docs/plugins/cleavejs.html" class="nav-link">Cleave js</a>
                     </li>
                     <li class="nav-item">
                        <a href="../docs/plugins/glightbox.html" class="nav-link">Glightbox</a>
                     </li>
                     <li class="nav-item">
                        <a href="../docs/plugins/scrollcuejs.html" class="nav-link">Scrollcue js</a>
                     </li>
                     <li class="nav-item">
                        <a href="../docs/plugins/swiper.html" class="nav-link">Swiper</a>
                     </li>

                     <li>
                        <div class="navbar-border"></div>
                     </li>

                     <li class="navbar-header mt-0">
                        <h5 class="heading">Utilities</h5>
                     </li>
                     <li class="nav-item"><a href="../docs/background.html" class="nav-link">Background</a></li>
                     <li class="nav-item"><a href="../docs/border.html" class="nav-link">Borders</a></li>
                     <li class="nav-item"><a href="../docs/colored-link.html" class="nav-link">Colored Links</a></li>
                     <li class="nav-item"><a href="../docs/opacity.html" class="nav-link">Opacity</a></li>
                     <li class="nav-item"><a href="../docs/ratio.html" class="nav-link">Ratio</a></li>
                     <li class="nav-item"><a href="../docs/stacks.html" class="nav-link">Stacks</a></li>
                     <li class="nav-item"><a href="../docs/color.html" class="nav-link">Colors</a></li>
                     <li class="nav-item"><a href="../docs/text.html" class="nav-link">Text</a></li>
                     <li class="nav-item"><a href="../docs/text-truncation.html" class="nav-link">Text truncation</a>
                     </li>
                     <li class="nav-item"><a href="../docs/vertical-rule.html" class="nav-link">Vertical rule</a></li>
                  </ul>
               </div>
            </div>
         </div>
      </aside>

      <!--Wrapper start-->
      <div class="docs-wrapper">
         <div class="docs-content">
            <!--Content start-->
            <div class="container">
               <div class="row">
                  <div class="col-lg-10 col-12">
                     <div class="row">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                           <div class="mb-5" id="intro">
                              <h1 class="mb-2">Introduction</h1>
                              <p>
                                 Block is beautifully designed, expertly crafted components UI kit for building a
                                 high-quality website and web apps using web technologies — HTML, CSS, and
                                 JavaScript — with integrations of the world’s most popular framework
                                 <a href="https://getbootstrap.com/" target="_blank" rel="nofollow">Bootstrap</a>
                                 .
                              </p>
                           </div>
                        </div>
                     </div>
                     <div class="row">
                        <div class="col-md-12 col-12">
                           <div class="mb-5">
                              <p class="fs-4 mb-0">Guide will help you get started with a Block Theme, including how to
                                 run, customize, update, and integrate your theme!</p>
                              <div class="my-6">
                                 <div class="alert alert-info" role="alert">
                                    Note: We highly recommend to check out The Guide an official Bootstrap Theme
                                    <a href="https://themes.getbootstrap.com/guide/" class="alert-link">guidelines</a>
                                    by Bootstrap core team.
                                 </div>
                              </div>
                           </div>
                           <div class="mb-5" id="setting-up">
                              <h2>Setting up local development</h2>
                              <p class="mb-0">
                                 Block is built using modern development toolset. Setting up local development Like
                                 Gulp, Node js, SASS & Bootstrap SCSS.
                                 <a href="environment-setup.html">Read More</a>
                              </p>
                           </div>
                           <div class="mb-5" id="customize-theme">
                              <div class="mb-4">
                                 <h2>Customize your theme</h2>
                                 <p class="mb-0">
                                    Now that you’ve got your theme running and understand the compiling process, let’s
                                    discuss the proper ways to edit and customize your theme. There are two
                                    primary strategies for working with your theme.
                                 </p>
                              </div>
                              <div class="row">
                                 <div class="col-lg-6 col-12">
                                    <div class="card border shadow-none mb-4 mb-lg-0">
                                       <div class="card-body p-6">
                                          <div class="mb-4">
                                             <img src="https://block.codescandy.com/assets/images/docs/path-gulp.svg"
                                                alt="" class="avatar-lg" />
                                          </div>
                                          <h3>Working with Gulp</h3>
                                          <p>Working with source files showcases how powerful Bootstrap themes can be
                                             and the underlying design systems.</p>
                                          <a href="#" class="btn-link">Start with Gulp</a>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-lg-6 col-12">
                                    <div class="card border shadow-none mb-4 mb-lg-0">
                                       <div class="card-body p-6">
                                          <div class="mb-4">
                                             <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54"
                                                fill="currentColor" class="bi bi-folder-fill text-warning"
                                                viewBox="0 0 16 16">
                                                <path
                                                   d="M9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.825a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3zm-8.322.12C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139z" />
                                             </svg>
                                          </div>
                                          <h3>Working with compiled files</h3>
                                          <p>Simply attach the compiled CSS and JS files to an HTML page, or use an HTML
                                             page already provided in your theme.</p>
                                          <a href="#" class="btn-link">Start with compiled HTML files</a>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
            <!--Content end-->
         </div>
         <!-- Footer -->
         <footer class="container-fluid py-2 border-top position-fixed bottom-0 bg-white"
            style="width: -webkit-fill-available">
            <div class="row align-items-center">
               <div class="col-9">
                  <div class="small">
                     Copyright © 2024

                     <span class="text-primary"><a href="#">Block Bootstrap 5 Theme</a></span>
                     | Designed by
                     <span class="text-primary"><a href="#">CodesCandy</a></span>
                  </div>
               </div>
               <div class="col-3">
                  <div class="text-md-end d-flex align-items-center justify-content-end">
                     <div class="dropdown">
                        <button class="btn btn-light btn-icon rounded-circle d-flex align-items-center" type="button"
                           aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme (auto)">
                           <i class="bi theme-icon-active"></i>
                           <span class="visually-hidden bs-theme-text">Toggle theme</span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="bs-theme-text">
                           <li>
                              <button type="button" class="dropdown-item d-flex align-items-center"
                                 data-bs-theme-value="light" aria-pressed="false">
                                 <i class="bi theme-icon bi-sun-fill"></i>
                                 <span class="ms-2">Light</span>
                              </button>
                           </li>
                           <li>
                              <button type="button" class="dropdown-item d-flex align-items-center"
                                 data-bs-theme-value="dark" aria-pressed="false">
                                 <i class="bi theme-icon bi-moon-stars-fill"></i>
                                 <span class="ms-2">Dark</span>
                              </button>
                           </li>
                           <li>
                              <button type="button" class="dropdown-item d-flex align-items-center active"
                                 data-bs-theme-value="auto" aria-pressed="true">
                                 <i class="bi theme-icon bi-circle-half"></i>
                                 <span class="ms-2">Auto</span>
                              </button>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
         </footer>

      </div>
      <!--Wrapper end-->
   </main>
   <!--Main wrapper end-->

   <!-- Scripts -->
   <!-- Libs JS -->
   <script src="https://block.codescandy.com/assets/libs/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/simplebar/dist/simplebar.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/headhesive/dist/headhesive.min.js"></script>

   <!-- Theme JS -->
   <script src="https://block.codescandy.com/assets/js/theme.min.js"></script>

   <script src="https://block.codescandy.com/assets/libs/prismjs/prism.js"></script>
   <script src="https://block.codescandy.com/assets/libs/prismjs/components/prism-scss.min.js"></script>
   <script src="https://block.codescandy.com/assets/libs/prismjs/plugins/toolbar/prism-toolbar.min.js"></script>
   <script
      src="https://block.codescandy.com/assets/libs/prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/sidebar-menu.js"></script>
   <script src="https://block.codescandy.com/assets/js/vendors/search.js"></script>
</body>

</html>